<template>
    <el-container class="wrapper" direction="vertical">
        <logo :is-collapse="isCollapse" :src="logoSrc" :title="title"/>
        <el-menu :default-active="$route.path" :background-color="backgroundColor" text-color="#8aa4af"
                 active-text-color="#ffffff"
                 :collapse-transition="false"
                 @select="select"
                 unique-opened :collapse="isCollapse" router>
            <template v-for="item in getRouters">

                <template v-if="item.children">
                    <template v-if="item.hidden && hasOneShowingChild(item.children,item)">
                        <el-menu-item v-for="sub in item.children" v-if="!sub.hidden" :key="sub.path"
                                      :index="resolvePath(item.path,sub.path)"
                                      style="height: 50px;line-height: 50px">
                            <i v-if="sub.meta" :class="sub.meta.icon"></i>&nbsp;&nbsp;<span v-if="sub.meta"
                                                                                            slot="title">{{ sub.meta.title }}</span>
                        </el-menu-item>
                    </template>

                    <el-submenu v-else :index="item.path" :key="item.path">
                        <!--一级标题-->
                        <template slot="title">
                            <i v-if="item.meta" :class="item.meta.icon"></i>&nbsp;&nbsp;
                            <span v-if="item.meta" slot="title">{{ item.meta.title }}</span>
                        </template>
                        <!--子标题-->
                        <el-menu-item v-for="sub in item.children" :key="sub.path" :index="sub.path">
                            <i v-if="sub.meta" :class="sub.meta.icon"></i>&nbsp;&nbsp;<span v-if="sub.meta"
                                                                                            slot="title">{{ sub.meta.title }}</span>
                        </el-menu-item>
                    </el-submenu>
                </template>

                <template v-else>
                    <el-menu-item v-if="!item.hidden" :index="item.path" :key="item.path">
                        <i v-if="item.meta" :class="item.meta.icon"></i>&nbsp;&nbsp;<span v-if="item.meta"
                                                                                          slot="title">{{ item.meta.title }}</span>
                    </el-menu-item>
                </template>

            </template>
        </el-menu>
    </el-container>
</template>
<script lang="ts">
    import {Component, Emit, Prop, Vue} from "vue-property-decorator";
    import {Getter} from "vuex-class";
    import Logo from "@/components/Logo.vue";
    import * as path from "path";

    @Component({
        components: {Logo}
    })
    export default class Aside extends Vue {
        @Prop({default: false}) private isCollapse!: boolean;
        @Prop({default: "#222d32"}) private backgroundColor!: string;
        @Prop() private logoSrc!: string;
        @Prop() private title!: string;
        @Getter("routers") private getRouters: any;

        /**
         * 返回是否是一个或者0个子菜单需要显示
         * @param children
         * @param parent
         */
        hasOneShowingChild(children = [], parent: any) {
            const showingChildren = children.filter((item: any) => {
                return !item.hidden;
            });
            return showingChildren.length === 1 || showingChildren.length === 0;
        }

        resolvePath(basePath: string, routePath: string) {
            return path.resolve(basePath, routePath);
        }

        @Emit("select")
        select(index: string, indexPath: string) {

        }
    }
</script>

<style scoped lang="scss">
    .wrapper {
        height: 100%;
        overflow: hidden;
        background-color: #222d32;

        &:after {
            content: "";
            display: table;
            clear: both;
        }

        .el-header {
            background-color: #367fa9;
            color: #ffffff;
            line-height: 50px;
            text-align: center;
            height: 50px;
            padding: 0;
            margin: 0;
            width: auto;
        }

        .el-menu {
            height: 100%;
            border-right: 0;
        }

        .el-menu > .el-menu-item {
            height: 35px;
            line-height: 35px;
        }
    }

</style>

